<template>
  <div>
    <div class="bg">
      <div class="bgtext1">在线支持</div>
      <div class="bgtext2">多种功能产品 供你挑选</div>
      <div class="bgtext3">
        <van-button type="info" size="large">联系我们</van-button>
      </div>
    </div>
    <div class="title">选择一下类型构建</div>
    <div class="list">
      <div
        class="listone"
        :style="show == 0 ? 'border:1px solid yellow' : ''"
        @click="chooseTap(0)"
      >
        <img src="../../assets/images/qiye.png" alt="" />
        <span>企业</span>
      </div>
      <div
        class="listone"
        :style="show == 1 ? 'border:1px solid yellow' : ''"
        @click="chooseTap(1)"
      >
        <img src="../../assets/images/geren.png" alt="" />
        <span>个人</span>
      </div>
      <div
        class="listone"
        :style="show == 2 ? 'border:1px solid yellow' : ''"
        @click="chooseTap(2)"
      >
        <img src="../../assets/images/qita.png" alt="" />
        <span>其他</span>
      </div>
    </div>
    <div class="title">认证信息填写</div>
    <div v-if="show == 1 || show == 2">
      <div class="msg">
        <div class="msg1">姓名：</div>
        <input class="msginput" type="text" />
      </div>
      <div class="msg">
        <div class="msg1">手机号：</div>
        <input class="msginput" type="text" />
      </div>
      <div class="msg">
        <div class="msg1">身份证号：</div>
        <input class="msginput" type="text" />
      </div>
      <div class="msgA">
        <div class="msg1">证件照：</div>
        <div class="add">+</div>
      </div>
    </div>
    <div v-if="show == 0">
      <div class="msg">
        <div class="msg1">企业名称：</div>
        <input class="msginput" type="text" />
      </div>
      <div class="msg">
        <div class="msg1">企业号：</div>
        <input class="msginput" type="text" />
      </div>
      <div class="msgA">
        <div class="msg1">营业执照：</div>
        <div class="add">+</div>
      </div>
    </div>
    <div class="button">提交</div>
    <div class="cell">已订阅功能</div>
    <div class="row">
      <img src="../../assets/images/qiye.png" alt="" />
      <span class="row1">工单服务</span>
      <span class="row2">技术难题,我们的技术人员随时解答</span>
      <span class="row3">点击进入></span>
    </div>
    <div class="row" style="padding-bottom:30px">
      <img src="../../assets/images/qita.png" alt="" />
      <span class="row1">外包软件</span>
      <span class="row2">app 网站 各种软件皆可定制开发</span>
      <span class="row3">点击进入></span>
    </div>
    <div class="bottom">
        
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: 0,
    };
  },
  methods: {
    chooseTap(index) {
      this.show = index;
    },
  },
};
</script>
<style scoped>
.bg {
  background-image: url("../../assets/images/guangao.png");
  background-size: 100%;
  width: 100%;
  height: 220px;
}
.bgtext1 {
  padding-top: 40px;
  margin-left: 20px;
  color: white;
  font-size: 25px;
}
.bgtext2 {
  padding-top: 10px;
  margin-left: 20px;
  color: white;
  font-size: 14px;
}
.bgtext3 {
  margin-left: 20px;
  color: white;
  width: 150px;
  margin-top: 15px;
  height: 30px;
}
.title {
  margin: 20px;
  font-size: 18px;
  letter-spacing: 1px;
}
.list {
  display: flex;
  align-items: center;
  width: 100%;
  height: 80px;
}
.listone {
  width: 80px;
  height: 80px;
  margin-left: 20px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #e7e7e7;
}
.listone img {
  width: 35px;
  height: 35px;
}
.listone span {
  margin-top: 5px;
  font-size: 16px;
}
.msg {
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.msgA {
  width: 90%;
  margin-left: 5%;
  display: flex;
  margin-top: 10px;
}
.msg1 {
  margin-right: 10px;
  font-size: 16px;
  width: 25%;
  text-align: right;
}
.msginput {
  height: 20px;
  width: 70%;
  border: 1px solid #e7e7e7;
  padding: 5px 3%;
}
.add {
  width: 80px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  font-size: 35px;
  background: #f7f8fa;
}
.button {
  height: 40px;
  width: 80%;
  margin-left: 10%;
  text-align: center;
  line-height: 40px;
  color: white;
  background: #4AC7D7;
  margin-top: 20px;
  margin-bottom: 20px;
}
.cell {
  width: 96%;
  padding: 0 2%;
  text-align: center;
  line-height: 60px;
  height: 60px;
  border-bottom: 1px solid #dadada;
  background: #f7f8fa;
  font-size: 20px;
}
.row {
  width: 96%;
  padding: 0 2%;
  height: 150px;
  background: #f7f8fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
}
.row img {
  width: 40px;
  height: 40px;
  margin-top: 20px;
}
.row1 {
  margin-top: 10px;
  font-size: 18px;
}
.row2 {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}
.row3 {
  margin-top: 5px;
  font-size: 14px;
  color: #83d0fa;
}
.bottom{
    width: 96%;
  padding: 0 2%;
  text-align: center;
  line-height: 60px;
  height: 60px;
  font-size: 12px;  
  background: #4AC7D7;
  color: white;
}
</style>